<template>
  <view class="container">
    <!-- 一级客户部分 -->
    <view class="customer-level first-level">
      <text class="level-title">一级客户</text>
      <view class="customer-list">
        <view v-for="(item, index) in firstLevelCustomers.slice(0, showAllFirst? firstLevelCustomers.length : 6)" :key="index" class="customer-item" :class="{ 'even-item': index % 2 === 0 }">
          <view class="customer-avatar" :style="{ 'background-color': item.face? 'initial' : '#e0f2f1' }">
            <image v-if="item.face" :src="item.face" mode="aspectFill" :style="{ width: '100rpx', height: '100rpx' }"></image>
          </view>
          <text class="customer-name">{{ item.nickName.slice(0, 11) }}</text>
        </view>
      </view>
      <view v-if="firstLevelCustomers.length > 6" class="view-all" @click="viewAll('first')">查看全部</view>
    </view>
    <!-- 二级客户部分 -->
    <view class="customer-level second-level">
      <text class="level-title">二级客户</text>
      <view class="customer-list">
        <view v-for="(item, index) in secondLevelCustomers.slice(0, showAllSecond? secondLevelCustomers.length : 3)" :key="index" class="customer-item" :class="{ 'even-item': index % 2 === 0 }">
          <view class="customer-avatar" :style="{ 'background-color': item.face? 'initial' : '#e8f5e9' }">
            <image v-if="item.face" :src="item.face" mode="aspectFill" :style="{ width: '100rpx', height: '100rpx' }"></image>
          </view>
          <text class="customer-name">{{ item.nickName.slice(0, 11) }}</text>
        </view>
      </view>
      <view v-if="secondLevelCustomers.length > 6" class="view-all" @click="viewAll('second')">查看全部</view>
    </view>
  </view>
</template>

<script>
import { getServiceList } from "@/api/members";
export default {
  data() {
    return {
      firstLevelCustomers: [
        // 可补充更多一级客户数据
      ],
      secondLevelCustomers: [
        // 可补充更多二级客户数据
      ],
      showAllFirst: false,
      showAllSecond: false
    };
  },
  onLoad() {
    this.getServiceList();
  },
  methods: {
    getServiceList() {
      getServiceList().then(res => {
        if (res.data.code === 200) {
          this.firstLevelCustomers = res.data.result.first;
          this.secondLevelCustomers = res.data.result.second;
        }
        console.log(res);
      });
    },
    viewAll(type) {
      if (type === 'first') {
        this.showAllFirst =!this.showAllFirst;
      } else {
        this.showAllSecond =!this.showAllSecond;
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.customer-level {
  margin-bottom: 30rpx;
  padding: 20rpx;
  border-radius: 10rpx;
}
.first-level {
  background-color: #f0f8ff;
  border: 2rpx solid #b0e0e6;
}
.second-level {
  background-color: #fff0f5;
  border: 2rpx solid #ffb6c1;
}
.level-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}
.customer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.customer-item {
  width: calc((100% - 40rpx) / 3);
  height: 140rpx;
  margin-bottom: 20rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.even-item {
  background-color: #f5f5f5;
}
.customer-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}
.customer-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-all {
  color: #007aff;
  text-align: center;
  margin-top: 10rpx;
}
</style>
